GENOME - DESIGN SYSTEM
UI/UX
Challenge
Bizagi changed the design software from Sketch to Figma. The Design team needed to create a design library system from scratch and we needed to figure out the best way of achieving this goal so that newcomers could use it easily and would understand how to create new components.
Discovery
We searched different ways of creating Figma components and we came with an option of creating Atoms (smaller items) to generate a base structure of each, so we could easily generate all the variations of each component instead of generating each variant on their own.
Process
Define
The first thing that needs to be done is identify which are the elements that our components are going to have in order to create the atoms properly.
Atoms
This are smaller components created to be assemble in order to create the main components structure.
Base structure
This is the main structure component that is created in order to generate all the desired variants of the component.
Generate variants
Using the base component we can start generating all the variants we desire and we also had to set the different properties for each.
This are some examples of the 1782 variants that we created for the input.
Final component
In the end we got our components ready to use!
